<template>
  <div class="company-detail">
    <div class="company-detail-head">
      <div class="company-detail-head__title">天津紫光云际产业园有限公司</div>
      <div class="company-detail-head__tag">交通运输业企业</div>
    </div>

    <div class="company-detail-more">
      统一信用代码91120116MA06T7UK4M
    </div>

    <div class="company-detail-title">基本信息</div>
    <div class="company-detail-tb">
      <form-detail :columns="columns" :data="info" border labelWidth="165px"></form-detail>
    </div>

    <div class="company-detail-title">经营信息</div>
    <div class="company-detail-tb">
      <form-detail :columns="columns2" :data="info" border labelWidth="165px"></form-detail>
    </div>
  </div>
</template>

<script>
export default {
  name: 'company-detail',
  cnName: '企业详情',
  data() {
    return {
      columns: [
        {label: '企业官网', prop: 'webSite'},
        {label: '企业简称', prop: 'jc'},
        {label: '成立日期', prop: 'cerDate'},
        {label: '社保缴纳人数', prop: 'sbjnrs'},
        {label: '状态', prop: 'zt'},
        {label: '是否规上企业', prop: 'sfgsqy'},
        {label: '从业人数', prop: 'cyrs'},
        {label: '人员规模', prop: 'rygm'},
        {label: '公积金缴纳人数', prop: 'gjjjnrs'},
        {label: '法人', prop: 'fr'},
        {label: '注册资金', prop: 'zczj'},
        {label: '英文名', prop: 'ywm'},
        {label: '企业规模', prop: 'qygm'},
        {label: '实缴资金', prop: 'sjzj'},
        {label: '注册币种', prop: 'zcbz'},
        {label: '企业类型', prop: 'qylx'},
        {label: '行业', prop: 'hy'},
        {label: '曾用名', prop: 'cym'},
        {label: '经营范围', prop: 'jyfw', span: 24}
      ],
      columns2: [
        {label: '登记联系电话', prop: 'djlxdh'},
        {label: '企业备案网站', prop: 'qybawz'},
        {label: '年度联系人', prop: 'ndlxr'},
        {label: '注册地址', prop: 'zcdz', span: 24},
        {label: '年度通讯地址', prop: 'ndtxdz', span: 24}
      ],
      info: {
        webSite: '--',
        jc: '中电金投',
        cerDate: '2019/2/15',
        sbjnrs: '--',
        zt: '存续',
        sfgsqy: '是',
        cyrs: '--',
        rygm: '--',
        gjjjnrs: '--',
        fr: '张志勇',
        zczj: '400000万',
        ywm: '--',
        qygm: '大型企业',
        hy: '租赁和商务服务业',
        cym: '--',
        jyfw: '资产管理（金融资产除外）；股权投资；投资管理；财务顾问。（依法须经批准的项目，经相关部门批准后方可开展经营活动）',
        djlxdh: '+86-13601167841',
        qybawz: '--',
        ndlxr: '宁斯同 18698626891',
        zcdz: '天津华苑产业区海泰西路18号北2-204工业孵化-5-81',
        ndtxdz: '北京市海淀区中关村街道世纪科贸大厦A座'
      }
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.company-detail {
  padding: 10px 20px;

  &-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &__title {
      font-size: 32px;
    }
    &__tag {
      font-size: 24px;
      background-color: rgba(26, 255, 156, 0.6);
      border-radius: 4px;
      margin-left: 15px;
      padding: 5px 10px;
      line-height: 1;
    }
  }

  &-more {
    font-size: 22px;
    margin-bottom: 40px;
  }

  &-title {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
    font-size: 24px;
    color: #EAFEFF;
    text-shadow: 0 4px 2px rgba(22,115,255, .6);

    &:before {
      content: "";
      position: absolute;
      width: 4px;
      height: 90%;
      left: 0;
      top: 10%;
      background: linear-gradient(180deg, rgba(2, 203, 252, 1) 0%, rgba(41, 114, 199, 1) 100%);
    }
  }

  &-tb {
    width: 90%;

    ::v-deep {
      .form-detail {
        &-border {
          border-top: 1px solid #074A78;
          border-left: 1px solid #074A78;
        }

        .el-form-item {
          position: relative;
          margin-bottom: 0;
          border-bottom: 1px solid #074A78;
          border-right: 1px solid #074A78;
          background-color: #021542;
        }
        .el-form-item__label {
          color: #FFF;
          font-size: 20px;
        }
        .el-form-item__content {
          min-height: 33px;
          padding: 5px 10px;
          border-left: 1px solid #074A78;
          box-sizing: content-box;
          background: rgba(21,188,238, .1);
          color: #FFF;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
